<template>
    <div class="playList" style="margin-bottom:2.3rem;width:100%;">
        <div class="back" :style="{'background': 'rgba(206, 61, 62, '+ opacity +')'}">
            <mu-appbar title="Title">
                <mu-icon-button icon='arrow_back' @click="back" slot="left"/>
                <div class="play-title">
                    <div class="play-name"><span>{{fname}}</span></div>     
                </div>
            </mu-appbar>
        </div>
        <div class="particulars">
            <div class="info">
                <div class="letf-img">
                    <span>{{playCount|total}}</span>
                    <img :src="coverImgUrl" alt="">
                </div>
                <div class="right-news">
                    <p class="title">{{name}}</p>
                    <p class="author">
                        <mu-avatar slot="left"  :src="creator.avatarUrl" :size="30" :iconSize="20"/>
                        <span>{{creator.nickname}}</span>
                    </p>
                </div>
            </div>
            <div class="bg-mask"></div>
            <div class="bg-player" id="backImg" :style="{'background-image':'url(' + coverImgUrl + ')'}" ></div>
        </div>
        <div class='songlist'>
            <div class="add-all">
                <mu-flat-button label="播放全部" class="flat-button" icon="favorite"/>
                <mu-divider/>       
            </div>
            <div>
                <mu-circular-progress :size="40" class="center" v-if="isloading"/>
                <mu-list v-show='!isloading'>
                    <div v-for="(item, index) in list"  @click="playAudio(item)">
                        <mu-list-item :disableRipple="true" :title="item.name" :describeText="item.ar[0].name">
                            <span slot="left" class="indexStyle">{{index}}</span>
                        </mu-list-item>
                        <mu-divider inset/>
                    </div>
                </mu-list>
            </div>
        </div>
    </div>
</template>
<script>
import api from '../api/api.js'
export default {
    data(){
        return {
        coverImgUrl: 'http://p3.music.126.net/eLtWbfzDorwzAtg4MSo5RQ==/109951162802059099.jpg',
        name: '歌单标题',
        fname: '歌单',
        playCount: 0,
        description: '描述描述',
        creator: {
            'avatarUrl': 'http://p3.music.126.net/eLtWbfzDorwzAtg4MSo5RQ==/109951162802059099.jpg',
            'nickname': '昵称'
        },
        list: [],
        opacity: 0,
        value: 1,
        isloading: false
        }
    },
    // 解除keep-alive的缓存
    beforeRouteEnter: (to, from, next) => {
        next(vm => {
            vm.get()
            // 判断过来的路由是否带有对应的参数信息
            if (to.params.coverImg) {
                // 获取songList传入的数据
                vm.coverImgUrl = vm.$route.params.coverImg
                vm.name = vm.$route.params.name
                vm.description = vm.$route.params.desc
                vm.playCount = vm.$route.params.count
                // console.log(vm.$route.params.coverImg)
                vm.creator = vm.$route.params.creator
            }
            window.onscroll = () => {
                var opa = window.pageYOffset / 150
                if (opa > 0.5) {
                vm.fname = vm.name
                } else {
                vm.fname = '歌单'
                }
                vm.opacity = window.pageYOffset / 150
            }
        })
    },
    // 路由离开时清除onscroll事件
    beforeRouteLeave: (to, from, next) => {
        window.onscroll = null
        next()
    },
    methods:{
        back () {
            this.$router.go(-1)
        },
        get() {
            this.isloading = true
            this.$http.get(api.getPlayListDetail(this.$route.params.id)).then((res) => {
                this.list = res.data.playlist.tracks
                this.isloading = false
            })
        },
        playAudio(song){
            //要播放先停止
            document.getElementById('audioPlay').pause()
            //更改audio状态
            this.$store.commit('pause')
            //定义一个空对象存储信息
            var audio = {}
            audio.id = song.id  // id
            audio.singer = song.ar[0].name // 演唱者
            audio.albumPic = song.al.picUrl
            audio.name = song.name
                  // 通过Vuex改变状态
            this.$store.commit('addToList', audio)
            this.$store.dispatch('getSong', audio.id)
        }
    },
    filters:{
        total(n){
            if(n<9999){
                return n
            }
            else{
                return (n/10000).toFixed(0)+'万'
            }
        }   
    }
}
</script>
<style lang="less" scoped>
    .back{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 56px;
        z-index: 15;
    }
    // 修改默认的bar样式
    .mu-appbar {
      background-color: transparent;
    }
    .mu-paper-1 {
      box-shadow: none;
      > .mu-appbar-title {
        text-align: center;
        font-size: 14px;
      }
    }
    .particulars{
        position: relative;
        padding: 60px .5rem 0 ;
        height: 10rem;
        .info{
            position: relative;
            z-index: 10;
            color: #fff;
            .letf-img{
                position: relative;
                float: left;
                width: 6rem;
                overflow: hidden;
                span{
                    position: absolute;
                    display: block;
                    padding-right: 5px;
                    width: 100%;
                    left: 0;
                    top: 0;
                    font-size: 12px;
                    text-align: right;
                    background: rgba(0,0,0,.35);
                    z-index: 11;
                }
                img {
                    max-width: 100%;
                    height: auto;
                }
            }
            .right-news{
                float: left;
                width: 7.5rem;
                margin-left: 1rem;
                .title {
                    font-size: 16px;
                }
                span{
                    display: inline-block;
                    font-size: 14px;
                    vertical-align: top;
                    line-height: 30px;
                }
            }
        }
    }
    .songlist{
        position: relative;
        z-index: 3;
        background: #fff;
        .indexStyle{
            padding-left: 10px;
            font-size: 18px;
            font-weight: bolder;
        }
    }
    
    .bg-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
        filter: blur(40px);
        -webkit-filter: blur(40px);
        z-index: 1;
    }
    .bg-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #292a2b;
        background-color: rgba(0,0,0,.35);
        z-index: 2;
    }
</style>
